<template>
  <div class="hard-cash">
    <div class="tanking">
      <div class="hardf-title">
        <div class="title">{{ title.nam }}——区域分布</div>
        <div class="close-girl" @click="closeButton"></div>
      </div>
      <div class="chart-collection">
        <div class="region">
          <div ref="chartArea" id="chart-area"></div>
          <div class="titlename">
            <span class="bordee">{{ title.one }}</span>
          </div>
        </div>
        <div class="region">
          <div ref="mountCollected" id="chart-area"></div>
          <div class="titlename">
            <span class="bordee">{{ title.two }}</span>
          </div>
        </div>
        <div class="region">
          <div ref="numberReceipts" id="chart-area"></div>
          <div class="titlename">
            <span class="bordee">{{ title.three }}</span>
          </div>
        </div>
        <div class="region">
          <div ref="sameday" id="chart-area"></div>
          <div class="titlename">
            <span class="bordee">{{ title.four }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits, onMounted } from "vue";
import * as echarts from "echarts";
import { postRequest } from "../utils/request";
import { da } from "element-plus/es/locales.mjs";
const emits = defineEmits(["close-area"]);
const props = defineProps({
  title: {
    type: Object,
    default: {},
  },
});
let chartArea = ref(null);
let mountCollected = ref(null);
let numberReceipts = ref(null);
let sameday = ref(null);
let closeButton = () => {
  emits("close-area", false);
};
let initChart = (Dom, titl, peopleList) => {
  let colorData = ["#6A0DAD", "#8000FF", "#9933FF", "#B366FF", "#CC99FF"];
  if (titl == "一码通") {
    colorData = ["#6A0DAD", "#8000FF", "#9933FF", "#B366FF", "#CC99FF"];
  } else if (titl == "充值卡") {
    colorData = ["#FFD700", "#FFE34D", "#FFF080", "#FFF5B3", "#FFF9D9"];
  } else {
    colorData = ["#00CC00", "#00FF00", "#66FF66", "#99FF99", "#CCFFCC"];
  }
  let sum = 0;
  if (peopleList.length > 0) {
    sum = peopleList.reduce((acc, obj) => acc + obj.value, 0).toFixed(2);
  }
  let option = {
    color: colorData,
    series: [
      {
        type: "pie",
        radius: ["30%", "48%"],
        center: ["50%", "55%"],
        avoidLabelOverlap: false,
        padAngle: 2,
        itemStyle: {
          borderRadius: 8,
        },
        label: {
          padding: [0, -75],
          alignTo: "labelLine",
          formatter: (params) => {
            return `{d|${params.name} 占比${params.percent}%}\n{c| 金额: ${params.value}}`;
          },
          rich: {
            c: {
              color: "rgba(255, 255, 255, 1)",
              fontSize: 12,
              lineHeight: 20,
              padding: [10, 0, 0, 0],
            },
            d: {
              fontSize: 12,
              color: "rgba(255, 255, 255, 1)",
              lineHeight: 20,
              padding: [-10, 0, 0, 0],
            },
          },
        },
        labelLine: {
          length: 30,
          length2: 110,
        },
        data: peopleList,
      },
    ],
    title: {
      text: "{val|" + sum + "}\n{name|" + "总金额" + "}",
      top: 140,
      left: "center",
      textStyle: {
        rich: {
          name: {
            fontSize: 16,
            fontWeight: "normal",
            color: "#FFF",
            padding: [2, 0],
          },
          val: {
            fontSize: 16,
            fontWeight: "bold",
            color: "#FFF",
            padding: [2, 0],
          },
        },
      },
    },
  };
  const chart = echarts.init(Dom.value);
  chart.setOption(option);
};
onMounted(() => {
  let url = "/screen/query/getCwYmtQy";
  let obg = {
    receipts: "",
    collected: "",
    refund: "",
    transactions: "",
  };
  let list = [];
  let ptionList = [];
  let refundList = [];
  let tkbsList = [];
  if (props.title.nam == "一码通") {
    url = "/screen/query/getCwYmtQy";
    obg = {
      receipts: "skbs",
      collected: "skje",
      refund: "tkbs",
      transactions: "tkje",
    };
  } else if (props.title.nam == "充值卡") {
    url = "/screen/query/getCwCzkQy";
    obg = {
      receipts: "czje",
      collected: "xfje",
      refund: "czkye",
      transactions: "xfzhl",
    };
  } else if (props.title.nam == "应收款") {
    url = "/screen/query/getCwYskQy";
    obg = {
      receipts: "bqxz",
      collected: "bqjs",
      refund: "yszkye",
      transactions: "yqje",
    };
  }
  postRequest(url, "年")
    .then(({ code, data }) => {
      if (code == 200) {
        list = data.map((item) => {
          return {
            name: item.qyzxmc,
            value: item[obg.receipts],
          };
        });
        initChart(chartArea, props.title.nam, list); //收款笔数
        ptionList = data.map((item) => {
          return {
            name: item.qyzxmc,
            value: item[obg.collected],
          };
        });
        initChart(mountCollected, props.title.nam, ptionList); //收款金额
        refundList = data.map((item) => {
          return {
            name: item.qyzxmc,
            value: item[obg.refund],
          };
        });
        initChart(numberReceipts, props.title.nam, refundList); //退款笔数
        tkbsList = data.map((item) => {
          return {
            name: item.qyzxmc,
            value: item[obg.transactions],
          };
        });
        initChart(sameday, props.title.nam, tkbsList); //退款金额
      } else {
        initChart(chartArea, props.title.nam, list); //收款笔数
        initChart(mountCollected, props.title.nam, ptionList); //收款金额
        initChart(numberReceipts, props.title.nam, refundList); //退款笔数
        initChart(sameday, props.title.nam, tkbsList); //退款金额
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
});
</script>
<style lang="less" scoped>
.hard-cash {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .tanking {
    width: 60vw;
    height: 65vh;
    background: #2f5892e0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .hardf-title {
    width: 60vw;
    height: 7vh;
    border-bottom: #32d7e9c0 1px solid;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: Dream Han Sans CN;
    font-weight: normal;
    font-size: 1.4vw;
    color: #ffffff;
    text-shadow: 0px 3px 7px rgba(1, 4, 8, 0.66);
    opacity: 0.97;
    .title {
      width: 80%;
    }
    .close-girl {
      width: 44px;
      height: 44px;
      background: url("../assets/close.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
  }
  .chart-collection {
    width: 100%;
    height: 61vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: space-around;
  }
  .region {
    width: 30vw;
    height: 29vh;
    position: relative;
    .titlename {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 3vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 0.9vw;
      .bordee {
        border-bottom: 2px solid #eff6f7c0;
      }
    }
  }
  #chart-area {
    width: 29vw;
    height: 28vh;
  }
}
</style>
